<template>
    <div>
               
            <el-form  :inline="true" >
                <el-row class="templateQuery"> 
                    <el-col :span="8">
                        <el-form-item label="产品名称:" width="100%">
                            <el-input 
                            placeholder=""
                            v-model="productName"
                            class="input-with-select"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">

                        <el-form-item label="" >
                            <el-select   v-model="filterMode" >
                                <el-option  label="精确" value="1"></el-option>
                                <el-option  label="模糊" value="0"></el-option>
                            </el-select>
                        </el-form-item>

                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="" >
                            <el-button type="primary" size="small" @click="query">查询</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
          </el-form>


          <el-table
      class="jlTable"
      style="width: 100%;"
      :header-cell-style="{ background: '#F2F2F2', color: '#333' }"
      :data="templateList"
    >
      <!-- <el-table-column type="selection" width="55"></el-table-column> -->
      <el-table-column label="序号" type="index" width="50" align="center"></el-table-column>
      <el-table-column label="产品名称" width="200">
        <template slot-scope="scope">{{ scope.row.proName }}</template>
      </el-table-column>
      <el-table-column label="模板名称" width="200">
        <template slot-scope="scope">{{ scope.row.tmpName }}</template>
      </el-table-column>
      <el-table-column label="导入阶段" width="200">
        <template slot-scope="scope">{{ scope.row.statusCd }}</template>
      </el-table-column>
      <el-table-column label="模板描述" width="200">
        <template slot-scope="scope">{{ scope.row.tmpDesc }}</template>
      </el-table-column>
    
      <el-table-column label="操作" width="100" fixed="right">
        <template slot-scope="scope">
            <a style="color:blue;cursor:pointer" @click="downClick(scope.row)">下载</a>
        </template>
      </el-table-column>
      
    </el-table>
    <el-row type="flex" class="row-bg mar-15" justify="center">
      <el-col :span="10">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="pageChange"
          :current-page="1"
          background
          :page-sizes="[5, 10, 15, 20]"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
        ></el-pagination>
      </el-col>
    </el-row>
    </div>
</template>
<script>
import CustOrderService from "@/api/order/CustOrderService";
export default {
    data(){
        return {
            filterMode:"0",
            productName:"",
            templateList:[],
            pageSize:10,
            pageIndex:0,
            total:0,

        }; 
    },
    created(){
      this.query();
    },
     methods: {
       async query(){
            var params = {};
            params.isExact = this.filterMode;
            params.proName = this.productName;
            params.pageIndex = this.pageIndex;
            params.pageSize = this.pageSize;

            var result = await CustOrderService.qryOrderItemExcelTemple(params);
            
             this.templateList = result.meta.records;
             this.total = result.meta.total;
        

        },
         //页面改变触发事件
        pageChange(val) {
            
            this.pageIndex = val;
            this.query();
    
        },
        handleSizeChange(val){
            
            this.pageSize = val;
            this.query();
        },
        /**
         * 模板下载
         */
        async downClick(val){
            
            var res = await CustOrderService.downOrderItemExcelTemple(val);

             if(res.size>0){
                let url = window.URL.createObjectURL(new Blob([res])) ;//创建下载链接
                let link = document.createElement('a') ;//创建a标签
                link.style.display = 'none'  ;//将a标签隐藏
                link.href = url ; //给a标签添加下载链接
                link.setAttribute('download', val.tmpName); // 此处注意，要给a标签添加一个download属性，属性值就是文件名称 否则下载出来的文件是没有属性的，空白白
                document.body.appendChild(link)  ;
                link.click() ; //执行a标签
            }else{
                this.$confirm(fileName+"下载失败!", "提示", {
                confirmButtonText: "确定",
                showCancelButton: false,
                type: "warn",
                center: true
                });
            }
           
        }
     }
    
}
</script>
<style lang="scss">

    .el-form--inline .el-form-item {
        display: inline-flex;
        margin-right: 0.1rem;
        vertical-align: top;
        width: 100%;
    }

</style>


